<template>
  <n-config-provider 
    :locale="zhCN" 
    :date-locale="dateZhCN"
  >
    <n-loading-bar-provider
      :loading-bar-style="{
        loading: 'height:.3em',
        error: 'height:.3em',
      }"
    >
      <n-dialog-provider>
        <n-notification-provider>
          <n-message-provider>
            <router-view
              style="
                width: inherit;
                height: inherit;
                min-width: inherit;
                min-height: inherit;
              "
            />
            <NaiveProviderContent />
          </n-message-provider>
        </n-notification-provider>
      </n-dialog-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<script setup>
import { defineComponent, h } from "vue";
import {
  zhCN,
  dateZhCN,
  NConfigProvider,
  NDialogProvider,
  NLoadingBarProvider,
  NNotificationProvider,
  NMessageProvider,
  useLoadingBar,
  useDialog,
  useMessage,
  useNotification,
} from "naive-ui";

import { setupMessage , setupDialog } from '@/utils/loadingBarService'

/**
 * 挂载naive组件的方法至window, 以便在全局使用
 */
function setupNaiveTools() {
  window.$loadingBar = useLoadingBar();
  window.$notification = useNotification();
  window.$message = setupMessage(useMessage());
  window.$dialog = setupDialog(useDialog());
}
const NaiveProviderContent = defineComponent({
  setup() {
    setupNaiveTools();
  },
  render() {
    return h("div");
  },
});
</script>
<style scoped></style>
